<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bricks Breaker Deluxe Crusher</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }
        canvas {
            border: 2px solid #000;
            background-color: #fff;
        }
    </style>
</head>
<body>
    新内容
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const canvasWidth = canvas.width;
        const canvasHeight = canvas.height;

        // 砖块设置
        const brickRowCount = 2; // 行数
        const brickColumnCount = 4; // 列数
        const brickWidth = 100;
        const brickHeight = 40;
        const brickPadding = 10;
        const brickOffsetTop = 50;
        const brickOffsetLeft = 50;
        const bricks = [];

        // 初始化砖块
        for (let c = 0; c < brickColumnCount; c++) {
            bricks[c] = [];
            for (let r = 0; r < brickRowCount; r++) {
                bricks[c][r] = { x: 0, y: 0, value: Math.floor(Math.random() * 5) + 1 }; // 随机值1-5
            }
        }

        // 小球设置
        const ballRadius = 10;
        const ballSpeed = 5; // 提高速度
        let ball = {
            x: canvasWidth / 2,
            y: canvasHeight - 50,
            speedX: ballSpeed * (Math.random() * 2 - 1), // 随机水平方向
            speedY: -ballSpeed // 垂直向上
        };

        let ballCount = 30; // 总共30个小球
        let currentBallIndex = 0;

        // 游戏状态
        let gameRunning = true;

        // 绘制砖块
        function drawBricks() {
            for (let c = 0; c < brickColumnCount; c++) {
                for (let r = 0; r < brickRowCount; r++) {
                    const b = bricks[c][r];
                    if (b.value > 0) {
                        const brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
                        const brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;
                        b.x = brickX;
                        b.y = brickY;
                        ctx.fillStyle = `hsl(${b.value * 60}, 100%, 50%)`;
                        ctx.fillRect(brickX, brickY, brickWidth, brickHeight);
                        ctx.fillStyle = '#000';
                        ctx.fillText(b.value, brickX + brickWidth / 2 - 5, brickY + brickHeight / 2 + 5);
                    }
                }
            }
        }

        // 检测碰撞
        function collisionDetection(ball) {
            for (let c = 0; c < brickColumnCount; c++) {
                for (let r = 0; r < brickRowCount; r++) {
                    const b = bricks[c][r];
                    if (b.value > 0) {
                        if (ball.x > b.x && ball.x < b.x + brickWidth && ball.y > b.y && ball.y < b.y + brickHeight) {
                            ball.speedY = -ball.speedY;
                            b.value -= 1;
                        }
                    }
                }
            }
        }

        // 绘制小球
        function drawBall(ball) {
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = '#0095DD';
            ctx.fill();
            ctx.closePath();
        }

        // 移动小球
        function moveBall(ball) {
            ball.x += ball.speedX;
            ball.y += ball.speedY;

            // 碰撞检测
            collisionDetection(ball);

            // 碰撞墙壁
            if (ball.x + ball.speedX > canvasWidth - ballRadius || ball.x + ball.speedX < ballRadius) {
                ball.speedX = -ball.speedX;
            }
            if (ball.y + ball.speedY < ballRadius) {
                ball.speedY = -ball.speedY;
            }
        }

        // 检查游戏结束
        function checkGameOver() {
            for (let c = 0; c < brickColumnCount; c++) {
                for (let r = 0; r < brickRowCount; r++) {
                    const b = bricks[c][r];
                    if (b.y + brickHeight > canvasHeight) {
                        alert('游戏结束');
                        gameRunning = false;
                        return;
                    }
                }
            }
        }

        // 游戏主循环
        function gameLoop() {
            if (!gameRunning) return;

            ctx.clearRect(0, 0, canvasWidth, canvasHeight);

            // 绘制砖块
            drawBricks();

            // 移动当前小球
            if (currentBallIndex < ballCount) {
                moveBall(ball);
                drawBall(ball);

                // 如果小球落地
                if (ball.y > canvasHeight) {
                    currentBallIndex++;
                    if (currentBallIndex < ballCount) {
                        // 重置小球位置和速度
                        ball.x = canvasWidth / 2;
                        ball.y = canvasHeight - 50;
                        ball.speedX = ballSpeed * (Math.random() * 2 - 1); // 随机水平方向
                        ball.speedY = -ballSpeed; // 垂直向上
                    } else {
                        alert("所有小球已用完，游戏结束！");
                        gameRunning = false;
                    }

                    // 砖块下移
                    for (let c = 0; c < brickColumnCount; c++) {
                        for (let r = 0; r < brickRowCount; r++) {
                            bricks[c][r].y += brickPadding;
                        }
                    }
                }
            }

            checkGameOver();

            requestAnimationFrame(gameLoop);
        }

        gameLoop();
    </script>
</body>
</html>